<template>
  <div class="admin_address_wrap">
    <div class="fixd_wrap">
      <back :title="'我的订单'"></back>
      <div class="nav_wrap">
        <ul>
          <li @click="select_type(item.id)" :class="type===item.id?'active':''" v-for="item in types">{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div class="orders_wrap">
      <orderList  @cancle_get_order_list="cancle_get_order_list" :dataList="data_list"></orderList>
      <div v-if="is_null" class="hint_wrap">
        没有订单...
      </div>
      <div v-if="loading" class="hint_wrap">
        加载中...
      </div>
      <div v-if="!is_more&&!is_null" class="hint_wrap">
        没有更多了...
      </div>
    </div>
      <router-view  @get_order_list="page=1, get_order_list()"  @cancle_get_order_list="cancle_get_order_list" ></router-view>
  </div>
</template>

<script>
  import back from 'components/back'
  import {stop_slider} from 'assets/base/base'
  import {get_cookie} from 'assets/cookie/cookie'
  import orderList from 'components/orderList'
  import {get_order_list} from  'api/order'
  import {w_scroll_top} from 'assets/dom/dom'
  export default {
    name: "",
    props:[],
    data(){
      return{
        types:[
          {id:'all',title:'全部'},
          {id:'yes',title:'已完成'},
          {id:'no',title:'已取消'}
        ],
        type:'all',
        page:1,
        loading:false,
        is_more:true,
        is_null:false,
        data_list:[]
      }
    },
    created(){
      this.brand_wrap_scroll()
      this.get_order_list()
    },
    activated(){
      this.page=1
      this.is_more=true
      this.is_null=false
      this.loading=false
      this.data_list=[]
      this.get_order_list()
    },
    methods:{
      brand_wrap_scroll() {

        this.$parent.scroll_name_myOrders = () => {
          if ((document.body.clientHeight - document.documentElement.clientHeight <= w_scroll_top() + 320&&!this.loading)) {
            if(this.is_more&&this.$route.path === "/myOrders"){
              this.loading=true
              this.get_order_list()
            }

          }
        }
        window.removeEventListener("scroll", this.$parent.scroll_name_myOrders);
        window.addEventListener("scroll", this.$parent.scroll_name_myOrders);

      },
      get_order_list(){
        this.loading=true
        this.is_null=false
        get_order_list({
          tp:3,
          types:this.type,
          token:get_cookie('key'),
          page:this.page
        }).then(res=>{
          if(res.status===200&&res.data.resStatus===0) {
            this.loading=false
            this.is_more=res.data.data.isMore
            console.log(res.data.data)
            if(this.page===1){
              this.data_list=res.data.data.list
            }else{
              this.data_list=this.data_list.concat(res.data.data.list)
            }
            if(res.data.data.isMore){
              this.page++
            }
          }else{
            this.is_null=true
            this.is_more=false
            this.data_list=[]
            this.loading=false
          }
        })
      },
      cancle_get_order_list(){
        this.page=1
        this.get_order_list()
      },
      select_type(type){
        this.type=type
        this.page=1
        this.data_list=[]
        this.is_more=true
        w_scroll_top(0)
        this.get_order_list()
      }
    },
    components:{
      back,
      orderList
    }
  }
</script>

<style scoped lang="scss">
  .fixd_wrap{
    max-width: 768px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }
  .nav_wrap{
    position:fixed;
    top: 46px;
    width: 100%;
    padding: 5px 10px 5px 10px;
    background-color: #fff;
    max-width: 768px;
    >ul{
      height: 40px;
      line-height: 40px;
      border: 1px solid #ddd;
      >li{
        width: 33.33%;
        float: left;
        border-right: 1px solid #ddd;
      }
      >li:last-child{
        border-right:none;
      }
      >.active{
        background: #019fe8;
        color: #fff;
      }
    }
  }
  .orders_wrap{
    height: 100%;
    padding-top: 87px;
    padding-bottom: 27px;
  }
  .hint_wrap{
    color: #999;
    padding-top: 15px;
  }
</style>

